<script setup lang="ts">
defineProps({
  iconSrc: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    required: true
  }
});
</script>

<template>
  <div class="styled-image-text">
    <div class="icon-container ">
<!--      <img :src="iconSrc" alt="Icon" class="icon" v-if="iconSrc">-->
      <div class="icon">   </div>
    </div>
    <span class="text">{{ text }}</span>
  </div>
</template>


<style scoped>
.styled-image-text {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 3px solid rgba(36, 206, 206, 1);
  background: rgba(20, 19, 19, 1);
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 10px;
  margin-bottom: 60px;
  width: 570px;
}
.icon-container {
  position: relative;
  display: inline-block;
  width: 40px; /* 外圆直径 */
  height: 40px;
  margin-right: 20px;
  border-radius: 50%; /* 使外圆成为圆形 */
  border: 9px solid #00f2f2; /* 外圆的边框颜色和宽度 */
}


.icon {
  width: 12px; /* 内圆的直径 */
  height: 12px;
  background: linear-gradient(135deg, #00f2f2 0%, #00b6b6 100%);/* 内圆的颜色 */
  border-radius: 50%; /* 使内圆完美 */
  position: absolute; /* 绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中对齐 */
}

.icon-container1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px; /* 宽度 */
  height: 20px; /* 高度 */
  margin-right: 10px;
  border-radius: 50%; /* 使容器成为圆形 */
  background: linear-gradient(135deg, #00f2f2 0%, #00b6b6 100%); /* 渐变背景 */
  position: relative; /* 相对定位，以便子元素可以绝对定位 */
}


.text {
  color: #fff;
  font-size: 28px;
}
</style>
